<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
	<link rel="stylesheet" href="${ctx}/js/jquery/responsiveslides/responsiveslides.css">
	<link rel="stylesheet" href="${ctx}/js/jquery/responsiveslides/demo.css">
	<script type="text/javascript" src="${ctx}/js/jquery/responsiveslides/responsiveslides.min.js"></script>
	<div class="callbacks_container">
		<ul class="rslides" id="photos_power_point">
			<c:forEach items="${photos}" var="photo">
			<li>
	          <img src="${ctx}/tools/download.do?dir=PHOTO&fileName=${photo.photoPath}" alt="${photo.photoTitle}">
<%-- 	          <p class="caption">${photo.photoTitle}</p> --%>
	        </li>
			</c:forEach>
      	</ul>
    </div>
<script type="text/javascript">
	//$("#photos_power_point img").imgAuto();
	$("#photos_power_point").responsiveSlides({
	    auto: false,
	    pager: false,
	    nav: true,
	    speed: 500,
	    namespace: "callbacks",
	    before: function () {
	      $('.events').append("<li>before event fired.</li>");
	    },
	    after: function () {
	      $('.events').append("<li>after event fired.</li>");
	    }
	});
</script>
</body>
</html>